{% block sw_settings %}
<sw-page
    class="sw-settings-index"
    :show-smart-bar="false"
>

    {% block sw_settings_content %}
    <template #content>
        <sw-card-view class="sw-settings-index__card-view">
            {% block sw_settings_content_card_view %}
            <mt-card
                hero
                class="sw-settings__card--hero"
                position-identifier="sw-settings-index"
            >
                {% block sw_settings_content_card_view_header %}
                <h1 class="sw-settings__content-header">
                    {{ $tc('sw-settings.index.title') }}
                </h1>
                {% endblock %}

                {% block sw_settings_content_card_content_grid %}
                <div
                    class="sw-settings__content-grid"
                    position-identifier="sw-settings-index-content"
                >
                    <div
                        v-for="(settingsItems, settingsGroup) in settingsGroups"
                        :id="`sw-settings__content-group-${settingsGroup}`"
                        :key="settingsGroup"
                        class="sw-settings__content-group"
                    >
                        <h2>{{ getGroupLabel(settingsGroup) }}</h2>

                        <sw-settings-item
                            v-for="settingsItem in settingsItems"
                            :id="settingsItem.id"
                            :key="settingsItem.name"
                            :label="getLabel(settingsItem)"
                            :to="getRouteConfig(settingsItem)"
                        >
                            <template #icon>
                                <component
                                    :is="settingsItem.iconComponent"
                                    v-if="settingsItem.iconComponent"
                                />
                                <mt-icon
                                    v-else
                                    :name="settingsItem.icon"
                                    size="16px"
                                />
                            </template>
                        </sw-settings-item>
                    </div>
                </div>
                {% endblock %}
            </mt-card>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
